<template>
  <div class="user-edit">
    <Modal
      :title="title"
      v-model="visible"
      width="850"
      :styles="{ 'border-radius': '15px' }"
      :mask-closable="type == '0'"
      scrollable="true"
      transfer
    >
      <div>
        <Form ref="form" :model="form" :rules="ruleValidate" label-width="150">
          <FormItem label="规则名称：" prop="title">
            <Input v-model="form.title" />
          </FormItem>
          <FormItem label="起充金额：" prop="initMoney">
            <Input v-model="form.initMoney" />元
          </FormItem>
          <FormItem label="第一档：" prop="oneGearMoney">
            <Input v-model="form.oneGearMoney" />
          </FormItem>
          <FormItem label="第二档：" prop="twoGearMoney">
            <Input v-model="form.twoGearMoney" />
          </FormItem>
          <FormItem label="第三档：" prop="threeGearMoney">
            <Input v-model="form.threeGearMoney" />
          </FormItem>
          <FormItem label="储值获取规则：">
            <div>
              <div
                v-for="(item, index) in scStoredValueIntegrals"
                :key="index"
                style="
                  display: flex;
                  white-space: nowrap;
                  align-items: center;
                  margin-bottom: 10px;
                "
              >
                充值
                <Input style="width: 70px" v-model="item.minMoney" />-<Input
                  style="width: 70px"
                  v-model="item.maxMoney"
                />元时，每元获得<Input
                  v-model="item.integral"
                  style="width: 70px"
                />个人积分
                <Icon
                  type="md-add"
                  @click="addscStoredValueIntegrals"
                  style="font-size: 25px; padding-left: 8px; cursor: pointer"
                  v-if="index == 0"
                />
                <Icon
                  style="font-size: 25px; padding-left: 8px; cursor: pointer"
                  type="ios-trash"
                  @click="delscStoredValueIntegrals(index)"
                  v-if="index != 0"
                ></Icon>
              </div>
            </div>
          </FormItem>
          <!-- <FormItem label="消费积分规则：" prop="integral">
            <div style="display: flex; white-space: nowrap">
              <Input v-model="form.integral" style="width: 100px" />积分
              <div style="margin: 0 10px">抵</div>
              <FormItem prop="money">
                <Input v-model="form.money" style="width: 100px" />元
              </FormItem>
               <FormItem prop="settleRatio" style="display:flex;padding-left:10px;">
               可用积分结算占比 <Input v-model="form.settleRatio" style="width: 100px" />%
              </FormItem>
            </div>
          </FormItem> -->
          <FormItem label="生效时间：" prop="effectStartDate ">
            <Row>
              <Col span="11">
                <DatePicker
                  v-model="form.effectStartDate"
                  type="datetime"
                   format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择生效时间"
                  style="width: 300px"
                ></DatePicker>
                <!-- <Date-picker
                  type="datetime"
                  placeholder="选择生效时间"
                  style="width: 500px"
                   v-model="form.effectStartDate"
                ></Date-picker> -->
              </Col>
              <Col span="2" style="text-align: center">-</Col>
              <Col span="11">
                <FormItem prop="effectEndDate">
                  <DatePicker
                    v-model="form.effectEndDate"
                    type="datetime"
                      format="yyyy-MM-dd HH:mm:ss"
                    placeholder="选择失效时间"
                    style="width: 300px"
                  ></DatePicker>
                </FormItem>
              </Col>
            </Row>
          </FormItem>
          <!-- <FormItem label="积分类型：" prop="integralTypeId">
            <Select v-model="form.integralTypeId"  style="width: 260px">
              <Option
                v-for="item in integralList"
                :value="item.id"
                :key="item.id"
                >{{ item.title }}</Option
              >
            </Select>
          </FormItem> -->
        </Form>
      </div>
      <div slot="footer">
        <Button
        v-if="!form.id"
          type="primary"
          size="large"
          :loading="submitLoading"
          @click="submit"
          >保存</Button
        >
        <Button size="large" @click="visible = false">取消</Button>
      </div>
      <!-- <div class="drawer-footer br" v-show="type != '0'">
        <Button type="primary" :loading="submitLoading" @click="submit"
          >提交</Button
        >
        <Button @click="visible = false">取消</Button>
      </div> -->
    </Modal>
  </div>
</template>

<script>
import {
  scIntegralTypeUpdate,
  scStoredValueAdd,
  // getScIntegralTypegetAll,
} from "@/api/index";
export default {
  name: "integral-clean-addEdit",
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    formData: {
      type: Object,
    },
  },
  data() {
    return {
      scStoredValueIntegrals: [{}],
      visible: this.value,
      title: "",
      passColor: "",
      submitLoading: false,
      maxHeight: 510,
      cleanDayShow: 0,
      form: {},
      ruleValidate: {
        title: [{ required: true, message: "请输入名称", trigger: "blur" }],
        initMoney: [
          { required: true, message: "请输入初始金额", trigger: "blur" },
        ],
        oneGearMoney: [
          { required: true, message: "请输入第一档金额", trigger: "blur" },
        ],
        twoGearMoney: [
          { required: true, message: "请输入第二档金额", trigger: "blur" },
        ],
        threeGearMoney: [
          { required: true, message: "请输入第三档金额", trigger: "blur" },
        ],
        effectStartDate: [
          {
            required: true,
            type: "date",
            message: "请选择生效时间",
            trigger: "blur",
          },
        ],
        effectEndDate: [
          {
            required: true,
            type: "date",
            message: "请选择失效时间",
            trigger: "blur",
          },
        ],
        integralTypeId: [
          { required: true, message: "请选择积分类型", trigger: "chanage" },
        ],
      },
    };
  },
  watch: {
    visible(val) {
      if (!val) {
        this.$emit("on-submit", false);
      }
    },
  },
  methods: {
    addscStoredValueIntegrals() {
      this.scStoredValueIntegrals.push({});
    },
    delscStoredValueIntegrals(index) {
      this.scStoredValueIntegrals.splice(index, 1);
    },
    // gettypeall() {
    //   getScIntegralTypegetAll({}).then((res) => {
    //     console.log(res);
    //     if (res.success) {
    //       this.integralList = res.result;
    //     }
    //   });
    // },
    submit() {
      console.log(this.form);
      this.$refs.form.validate((valid) => {
        if (valid) {
          console.log(this.form);
          if (this.form.id) {
            // scIntegralTypeUpdate(this.form).then((res) => {
            //   if (res.success) {
            //     this.$Message.success("操作成功");
            //     this.$emit("on-submit", true);
            //     this.visible = false;
            //   }
            // });
          } else {
            let obj = {};
            this.scStoredValueIntegrals.forEach((item, index) => {
              obj["scStoredValueIntegrals[" + index + "].minMoney"] =
                item.minMoney;
              obj["scStoredValueIntegrals[" + index + "].maxMoney"] =
                item.maxMoney;
              obj["scStoredValueIntegrals[" + index + "].integral"] =
                item.integral;
            });
            scStoredValueAdd({
              ...obj,
              ...this.form,
              effectStartDate: this.format(
                this.form.effectStartDate,
                "yyyy-MM-dd hh:mm:ss"
              ),
              effectEndDate: this.format(
                this.form.effectEndDate,
                "yyyy-MM-dd hh:mm:ss"
              ),
            }).then((res) => {
              if (res.success) {
                this.$Message.success("操作成功");
                this.$emit("on-submit", true);
                this.visible = false;
              }
            });
          }
        }
      });
    },
  },

  mounted() {
    // this.gettypeall();
    this.form = this.formData;
    
    if (this.form.id) {
      this.title = "回显储值规则";
      this.scStoredValueIntegrals = this.formData.scStoredValueIntegrals || [{}]
    } else {
      this.title = "添加储值规则";
    }
  },
};
</script>

<style lang="less">
@import "@/styles/drawer-common.less";
.ivu-form-item-content {
  display: flex;
  .txt {
    width: 45px;
    &.ml {
      margin-left: 10px;
    }
  }
}
</style>

